<template>
    <yd-cell-group>
        <yd-cell-item>
            <span slot="left">姓名：</span>
            <yd-input slot="right" hdLabel="姓名" ref="username" v-model="username" required :showClearIcon="true" :showErrorIcon="true" placeholder="请输入您的姓名"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">手机号：</span>
            <yd-input slot="right" type="tel" v-model="mobile" required :showSuccessIcon="true" :showErrorIcon="true" placeholder="请输入手机号码" regex="mobile"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">身份证：</span>
            <yd-input slot="right" hdVdate="idcard" type="tel" v-model="idcard" required :showSuccessIcon="true" :showErrorIcon="true" placeholder="请输入身份证" max="23"></yd-input>
        </yd-cell-item>
        <yd-cell-item>
            <span slot="left">银行卡：</span>
            <yd-input slot="right" type="tel" v-model="bankcard" required :showSuccessIcon="true" :showErrorIcon="true" placeholder="请输入银行卡" regex="bankcard"></yd-input>
        </yd-cell-item> 
        <yd-button-group>
            <yd-button size="large" @click.native="clickHander">提交</yd-button>
        </yd-button-group>
        <div v-html="result"></div>
    </yd-cell-group>
</template>

<script>
export default {
  name: 'form',
  data () {
    return {
      username: '',
      mobile: '',
      idcard: '',
      bankcard: '',
      result: ''
    }
  },
  methods: {
    clickHander () {
      const username = this.$refs.username
      console.log(this.$store)
      // const mobile = this.$refs.mobile
      // const idcard = this.$refs.idcard
      this.result = `{<br />  valid：${username.valid}，<br />  errorMes：'${username.errorMsg}'，<br />  errorCode：'${username.errorCode}'<br />}`;
      // this.result = `{<br />  valid：${idcard.valid}，<br />  errorMes：'${idcard.errorMsg}'，<br />  errorCode：'${idcard.errorCode}'<br />}`;
    }
  }
}
</script>

<style>

</style>